{% extends "layout/content.twig" %}

{% block  main %}
    <div class="layui-card">
        <div class="layui-card-header">
            {{ __('menu.page_title') }}
        </div>
        <div class="layui-card-body">

            <div class="layui-form" lay-filter="menu">

                <div class="layui-clear-space mtb20">
                    <a class="layui-btn layui-btn-normal layui-btn-sm create-menu">
                        <i class="layui-icon">&#xe654;</i>
                        {{ __('btn.create') }}
                    </a>
                </div>

                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col width="240">
                        <col width="240">
                        <col width="100">
                        <col width="100">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>{{ __('icon') }}</th>
                        <th>{{ __('menu.title') }}</th>
                        <th>{{ __('menu.url') }}</th>
                        <th>{{ __('sort') }}</th>
                        <th>{{ __('status') }}</th>
                        <th>{{ __('menu.open_type') }}</th>
                        <th>{{ __('remark') }}</th>
                        <th>{{ __('created_at') }}</th>
                        <th>{{ __('btn.operation') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for menu in menus %}
                        <tr>
                            <td>{{ menu.id }}</td>
                            <td>
                                {% if menu.icon %}
                                    <i class="{{ menu.icon }}"></i>
                                {% endif %}
                            </td>
                            <td>
                                <div class="{% if menu['__level__']>1 %}ml{{ menu['__level__']*10+10 }}{% endif %}">{{ menu.title }}</div>
                            </td>
                            <td>{{ menu.url }}</td>
                            <td>
                                <input type="text" name="sort" data-id="{{ menu.id }}" data-value="{{ menu.sort }}"
                                       value="{{ menu.sort }}" class="layui-input layui-input-inline"
                                       style="height: 22px;">
                            </td>
                            <td>

                                <input type="checkbox"
                                       name="status"
                                       title="{{ __('switch.open') }}|{{ __('switch.forbid') }}"
                                       lay-skin="switch"
                                       lay-filter="menu-status"
                                       value="{{ menu.id }}"
                                        {% if menu.status %} checked {% endif %}>

                            </td>
                            <td>
                                {{ menu.open_type }}
                            </td>
                            <td>
                                {{ menu.remark }}
                            </td>
                            <td>
                                {{ menu.created_at }}
                            </td>
                            <td>
                                <div class="layui-clear-space">
                                    <a class="layui-btn layui-btn-normal layui-btn-xs" data-id="{{ menu.id }}"
                                       lay-event="edit">{{ __('btn.edit') }}</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs"
                                       lay-event="delete" data-id="{{ menu.id }}">{{ __('btn.delete') }}</a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">

        layui.use(['http', 'toast', 'form', 'iconPicker', 'api'], function () {

            let http = layui.http;
            let api = layui.api;
            let toast = layui.toast;
            let form = layui.form;
            let icon = layui.iconPicker;

            let icon_render = function () {
                icon.render({
                    // 选择器，推荐使用input
                    elem: '[name=icon]',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    max_width: '480',
                    cellWidth: '43px',
                    limit: 32,
                    click: function (data) {
                        let icon = 'iconfont ' + data.icon;
                        $(data.elem).val(icon).attr('value', icon);
                    }
                });
            };

            $('.create-menu').on('click', function () {
                api.post('{{ auth_route('userMenu/create') }}', {}, { area: 'middle' }).then(res => {
                    icon_render();
                });
            });

            $('[name=sort]').on('blur', function () {
                  let value = $(this).val();
                  let id = $(this).data('id');
                  let origin = $(this).data('value');

                  if (value + '' !== origin + '') {
                      http.post('{{ auth_route('permission/setMenuSort') }}', {
                          id: id,
                          sort: value
                      }).then(res => {
                          toast.top(res);
                      });
                  }
              }
            );

            $('[lay-event=edit]').on('click', function () {
                let id = $(this).data('id');
                if (id) {
                    api.post('{{ auth_route('userMenu/edit') }}', { id: id }, { area: 'middle' }).then(res => {
                        icon_render();
                    });
                }
            });

            $('[lay-event=delete]').on('click', function () {
                let id = $(this).data('id');
                if (id) {
                    api.post('{{ auth_route('userMenu/delete') }}', { id: id }).then(res => {
                        toast.top(res);
                        setTimeout(function () {
                            window.location.reload();
                        }, 1500);
                    });
                }
            });

            form.on('switch(menu-status)', function (data) {
                let elem = data.elem;
                // 这里获取的 checked一直是undefined
                let checked = elem.checked;
                // 这里是id，而非修改switch的值（on 、off）
                let value = elem.value;

                http.post('{{ auth_route('permission/setMenuStatus') }}', {
                    id: value,
                    status: checked ? 1 : 0
                }).then(res => {
                    toast.top(res);
                });
            });
        });
    </script>
{% endblock %}
